import { ReactNode, useEffect } from 'react'
import { useNavigate } from '@tanstack/react-router'
import { useAuthStore } from '@/stores/auth-store'
import { UnauthorisedError } from '@/features/errors/unauthorized-error'

interface AuthGuardProps {
  /**
   * 子组件
   */
  children: ReactNode
  /**
   * 未认证时显示的组件
   */
  fallback?: ReactNode
}

/**
 * 认证保护组件
 * 只有已认证的用户才能访问子组件
 */
export function AuthGuard({
  children,
  fallback
}: AuthGuardProps) {
  const navigate = useNavigate()
  const { auth } = useAuthStore()
  
  // 检查用户是否已认证
  const isAuthenticated = !!auth.accessToken && !!auth.user
  
  // 如果用户未认证，重定向到登录页面
  useEffect(() => {
    if (!isAuthenticated) {
      navigate({ to: '/sign-in', search: { redirect: window.location.pathname } })
    }
  }, [isAuthenticated, navigate])
  
  // 如果用户已认证，显示子组件
  if (isAuthenticated) {
    return <>{children}</>
  }
  
  // 如果未认证，显示fallback或未授权页面
  return fallback || <UnauthorisedError />
}